<template>
<div class="post">
    <w-header></w-header>
    <b-container>
        <b-row>
            <b-col sm="6">

                <b-card title="发布新话题" tag="article" class="mt-5">
                    <b-form>
                        <b-card-text>

                            <b-row>
                                <b-col sm="3">
                                    <label>话题标题</label>
                                </b-col>
                                <b-col sm="9">
                                    <b-form-input type="text" v-model="Allter.title"></b-form-input>
                                </b-col>
                            </b-row>
                            <b-row>
                                <b-col sm="3">
                                    <label>话题分类</label>
                                </b-col>
                                <b-col sm="9">
                                    <b-form-group>
                                        <b-form-checkbox-group v-model="selected" :options="options" name="buttons-2" buttons></b-form-checkbox-group>
                                    </b-form-group>
                                </b-col>
                            </b-row>
                            <b-row>
                                <b-col sm="3">
                                    <label>内容</label>
                                </b-col>
                                <b-col sm="9">
                                    <b-form-textarea id="textarea" v-model="Allter.body" placeholder="请输入内容" rows="3" max-rows="10">
                                    </b-form-textarea>
                                </b-col>
                            </b-row>

                            <b-row>
                                <b-col sm="3">
                                    <label>图片</label>
                                </b-col>
                                <b-col sm="9">
                                    <b-row>
                                        <b-col sm="3">
                                            <b-img thumbnail :src="Allter.imgUrl"></b-img>
                                        </b-col>
                                    </b-row>
                                    <b-form-file class="mt-3" @change="upLoadAvatar" id="file-large" size="lg"></b-form-file>

                                </b-col>
                            </b-row>

                            <b-row>
                                <b-col sm="3">
                                    <label>简介</label>
                                </b-col>
                                <b-col sm="9">
                                    <b-form-textarea id="textarea" v-model="Allter.outline" placeholder="请输入内容" rows="3" max-rows="10">
                                    </b-form-textarea>
                                </b-col>
                            </b-row>
                        </b-card-text>
                        <b-button class="block" variant="primary" @click="Releasetopic">发布新话题 </b-button>

                    </b-form>
                </b-card>
            </b-col>
            <b-col sm="6">

            </b-col>
        </b-row>
    </b-container>
</div>
</template>

<script>
export default {
    name: "psot",
    data() {
        return {
            Allter: {
                imgUrl: "",
                title: "",
                body: "",
                outline: "",
                cid: ""
            },
            selected: [],
            options: [],

        };
    },
    created() {
        this.Postcategory()
    },
    methods: {
        upLoadAvatar(e) {
            console.dir(e.target.files[0]);
            let formData = new FormData();
            formData.append("file", e.target.files[0]);
            this.$axios
                .post("/common/filesUpload.php", {
                    data: formData,
                    processData: false,
                    contentType: false,
                })
                .then((res) => {
                    //   console.log(res);
                    this.Allter.imgUrl = res.data.url;
                });
        },
        Releasetopic() {
            let Alltercid = this.selected.toString()
            this.Allter.cid = Alltercid
            console.log(this.Allter.cid);
            if (this.Allter) {
                this.$artApi.isPost(this.Allter).then((res) => {
                    console.log(res);
                        if (res.ret == 200) {
                        this.$message({
                            message: '恭喜你，发布成功',
                            type: 'success'
                        })
                    } else {
                        if (res.title) {
                            this.$message({
                                message: res.title,
                                type: 'error',
                                offset: 60

                            })
                        }
                        if (res.outline) {
                            this.$message({
                                message: res.outline,
                                type: 'error',
                                offset: 120

                            })
                        }
                           if (res.body) {
                            this.$message({
                                message: res.body,
                                type: 'error',
                                offset: 180

                            })
                        }
                          if (res.imgUrl) {
                            this.$message({
                                message: res.imgUrl,
                                type: 'error',
                                offset: 240

                            })
                        }
                    }
                })
            }
        },
        Postcategory() {
            this.$artApi.category().then((res) => {
                console.log(res);
                for (let index = 0; index < res.data.length; index++) {
                    const data = {
                        text: res.data[index].title,
                        value: res.data[index].cid,
                    }
                    this.options.push(data)
                }
            })
        }

    },
};
</script>

<style lang="scss">
.post {
    .block {
        width: 100%;
    }

    .custom-file-label {
        display: none;
    }

    .btn-secondary {
        overflow: hidden;
        padding-right: 25px;

        input {
            opacity: 0;
            text-indent: -9999;
        }
    }

    .card-text {
        .row {
            margin-top: 15px;
        }
    }

    .btn-group,
    .btn-group-vertical {
        flex-wrap: wrap
    }
}
</style>
